<template>
    <div class="messageInput-root">
        <div class="messageInput-border">
            <div class="root-name">
                <input v-model="messageData.name" placeholder="NickName" maxlength="20" />
                <div class="clear-but" @click="clear_ClickEvent">
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="root-input">
                <textarea ref="textareaDom" @input="textarea_InputEvent" v-model="messageData.text"
                    placeholder="Please Enter ..."></textarea>
            </div>
            <div class="root-but">
                <span class="but-To"><b v-if="messageData.to">To : </b>{{ messageData.to }}</span>
                <span @click="load_ClickEvent">Submit</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useUserStores } from "@/stores/index.js";
import { loadMessage_API } from "@/axios/api/other.js"
import { onMounted } from "vue";

const userStores = useUserStores();
let config = userStores.getConfigAction();
const backImage = 'url("' + config.backImage + '")';

const emits = defineEmits(['clear', 'load'])
const textareaDom = ref();

const messageData = ref({
    name: '',
    text: '',
    to: '',
});

onMounted(() => {
    messageData.value.name = userStores.config.nickName;
})

const clear_ClickEvent = () => {
    emits('clear', true);
}

const load_ClickEvent = () => {
    const { name, text } = messageData.value;
    if (!name) {
        messageBox.show({
            color: 'yellow',
            text: "Please Enter NickName!"
        });
        return;
    }
    if (!text) {
        messageBox.show({
            color: 'yellow',
            text: "Please Enter Message!"
        });
        return;
    }
    const arr = text.split('\n');
    let curTest = '';
    for (let i = 0; i < arr.length; i++) {
        curTest += (arr[i] + '<br/>')
    }
    loadMessage_API({ name: name, text: curTest }).then(res => {
        if (res.data.statusCode == 0) {
            //发表成功
            messageBox.show({
                color: 'green',
                text: "Load Message OK!"
            });
            const id = res.data.result;
            //记录楼层, 并且吧NickName Save localhost
            userStores.config.messageList.push(id);

            textareaDom.value.value = '';
            messageData.value.text = '';

            emits('load', { id: id, text: curTest, name: name });
        } else {
            messageBox.show({
                color: 'green',
                text: res.data.message
            });
        }
    }).catch(res => {
        console.log(res)
    }).finally(() => {
        userStores.config.nickName = name;
    });
}

const textarea_InputEvent = () => {
    const { text } = messageData.value;
    if (text) {
        const arr = text.split('\n');
        if (arr.length >= 2) {
            var num = parseInt(arr[0].substring(2, arr[0].length));
            if (arr[0].substring(0, 2) == 'to' && (num + '').length == arr[0].length - 2) {
                messageData.value.to = num;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.messageInput-root {
    width: 100%;
    height: 100%;
    background-image: v-bind(backImage);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    transform-style: preserve-3d;

    .messageInput-border {
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        display: grid;
        grid-template-rows: 10% 80% 10%;

        .root-name {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            >input {
                background: rgba(0, 0, 0, 0);
                border: 0px;
                border-bottom: 1px solid rgba(128, 128, 128, 0.5);
                font-size: 16px;
                font-weight: 900;
                padding: 3px;
                margin-top: 10px;
                text-align: center;
                outline: none;
            }

            .clear-but {
                position: absolute;
                right: 10px;
                height: 25px;
                width: 25px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                >div {
                    width: 100%;
                    height: 2px;
                    background-color: black;
                    border-radius: 7px;
                }

                >div:first-child {
                    transform: rotate(45deg);
                }

                >div:last-child {
                    transform: rotate(-45deg);
                    margin-top: -2px;
                }
            }
        }

        .root-input {
            display: flex;
            justify-content: center;
            align-items: center;

            >textarea {
                width: calc(90%);
                height: calc(100% - 30px);
                background: rgba(0, 0, 0, 0);
                background: none;
                outline: none;
                border: 0px;
                font-size: 16px;
                padding: 5px 7px;
                border: 1px solid rgba(128, 128, 128, 0.5);
                border-radius: 7px;
                line-height: 20px;
                // font-weight: 900;
            }
        }

        .root-but {
            display: flex;
            justify-content: space-between;
            align-items: end;

            .but-To {
                padding: 5px 15px;
                margin: 0px 10px 10px 0px;
            }

            >span:last-child {
                background: rgba(255, 255, 255, 0.3);
                border: 1px solid rgba(128, 128, 128, 0.5);
                padding: 5px 15px;
                border-radius: 7px;
                color: rgba(128, 128, 128, 1);
                transition-duration: 0.3s;
                margin: 0px 10px 10px 0px;
            }

            >span:last-child:active {
                background: rgba(128, 128, 128, 1);
                color: white;
            }
        }
    }
}
</style>